import React, { useState, useEffect } from "react";
import { getDoctorHealthyCurrencyNoticeList, getDoctorInquiryNoticeList, getDoctorSystemNoticeList } from "../../../../api/my";
import { useLocation, useNavigate } from "react-router-dom";
import style from './style.module.scss'
import { MyHealthyCurrencyNotice, MyInquiryNotice, MyNavBar, MySystemNotice } from "../../../../components";
import EmptyPage from "../../../../components/emptyPage";
import { List } from "react-vant";
import { useBoolean } from "ahooks";


// 用户通知列表类型
interface noticeListRawState {
  id: number,
  content: string,
  createTime: number
}

const Index: React.FC = () => {

  const navigate = useNavigate()

  const [noticeList, setNoticeList] = useState<noticeListRawState[]>([])

  const [pageIndex, setPageIndex] = useState(1)
  const { state: { detailTitle } } = useLocation()

  // 是否加载完毕
  const [finish, { setTrue, setFalse }] = useBoolean(false);

  const getNoticeList = async () => {
    if (detailTitle === "系统消息") {
      // 用户系统通知列表
      const resp = await getDoctorSystemNoticeList(pageIndex, 120)
      // 是否存在更多数据
      if (resp.result.length > 0) {
        if (pageIndex === 1) {
          setNoticeList(resp.result);
        } else {
          setNoticeList([...noticeList, ...resp.result]);
        }
        setPageIndex(pageIndex + 1);
      } else {
        // 请求完成 没有更多数据
        setTrue();
      }
      setNoticeList(resp.result as noticeListRawState[])
    } else if (detailTitle === '问诊消息') {
      // 用户问诊通知列表
      const resp = await getDoctorInquiryNoticeList(pageIndex, 120)
      // 是否存在更多数据
      if (resp.result.length > 0) {
        if (pageIndex === 1) {
          setNoticeList(resp.result);
        } else {
          setNoticeList([...noticeList, ...resp.result]);
        }
        setPageIndex(pageIndex + 1);
      } else {
        // 请求完成 没有更多数据
        setTrue();
      }
    } else if (detailTitle === 'H币入账消息') {
      // 用户H币通知列表
      const resp = await getDoctorHealthyCurrencyNoticeList(pageIndex, 120)
      // 是否存在更多数据
      if (resp.result.length > 0) {
        if (pageIndex === 1) {
          setNoticeList(resp.result);
        } else {
          setNoticeList([...noticeList, ...resp.result]);
        }
        setPageIndex(pageIndex + 1);
      } else {
        // 请求完成 没有更多数据
        setTrue();
      }
    }
  }

  useEffect(() => {
    setFalse()
    getNoticeList()
  }, [pageIndex])

  return (
    <div className={style.message_detail}>
      {
        noticeList.length ? (
          <div>
            <MyNavBar
              title={detailTitle}
              style={{ backgroundColor: "#fff" }}
              onClickLeft={() => { navigate('/my/message') }}
            ></MyNavBar>
            <List
              finished={finish}
              className={style.messageList}
              onLoad={getNoticeList}
              finishedText="没有更多数据了"
            >
              {
                // 系统消息
                detailTitle === '系统消息' ? (
                  noticeList && noticeList.map(item => {
                    return <div key={item.id}>
                      <MySystemNotice
                        id={item.id}
                        content={item.content}
                        createTime={item.createTime}
                      ></MySystemNotice>
                    </div>
                  })
                ) : (
                  // 问诊消息
                  detailTitle === '问诊消息' ? (
                    noticeList && noticeList.map(item => {
                      return <div key={item.id}>
                        <MyInquiryNotice
                          id={item.id}
                          content={item.content}
                          createTime={item.createTime}
                        ></MyInquiryNotice>
                      </div>
                    })
                  ) : (
                    // H币入账消息
                    noticeList && noticeList.map(item => {
                      return <div key={item.id}>
                        <MyHealthyCurrencyNotice
                          id={item.id}
                          content={item.content}
                          createTime={item.createTime}
                        ></MyHealthyCurrencyNotice>
                      </div>
                    })
                  )
                )
              }
            </List>
          </div>
        ) : (
          <EmptyPage title={detailTitle} desc="暂无消息" path="/my/message"></EmptyPage>
        )
      }
    </div>
  )
};

export default Index;
